<div ng-include="'views/appbar.html'"></div>
<div class="card ng-hide am-fade-and-slide-bottom" ng-show='up'>
    <div ng-include="'views/breadcrumb-nav.html'"></div>
    <div class="container">
        <div class="row" style="border:0px solid black; padding: 20px 40px;">
            <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
                <form name='poolForm' role="form" novalidate>
                    <div class="form-group" ng-class="{ 'has-error': poolForm.name.$invalid && !poolForm.name.$pristine}">
                        <label class="text-muted" for="name">NAME</label>
                        <input id="name" type="text" required ng-maxlength=64 ng-minlength=3
                        name="name" class="form-control" ng-model='pool.name' placeholder="New Pool Name"></input>
                        <p ng-show='poolForm.name.$error.minlength' class='help-block'>Name is too short (at least 3 characters)</p>
                        <p ng-show='poolForm.name.$error.maxlength'
                        class='help-block'>Name is too long (64 characters max)</p>
                        <p ng-show='poolForm.name.$error.pattern'
                        class='help-block'>Invalid Characters</p>
                        <p ng-show='poolForm.name.$error.duplicate' class='help-block'>Pool name is already in use</p>
                        <p ng-show='poolForm.name.$error.server' class='help-block'>{{poolForm.name.$error.server}}</p>
                    </div>
                    <div class="form-group" ng-class="{ 'has-error': poolForm.size.$invalid && !poolForm.size.$pristine}">
                        <label class="text-muted" for="size">REPLICAS (SIZE)</label>
                        <input id="size" type="number" name="size" required class="form-control"
                        placeholder="Size" ng-model='pool.size'></input>
                        <p ng-show='poolForm.size.$error.number' class='help-block'>Invalid Number</p>
                        <p ng-show='poolForm.size.$error.server' class='help-block'>{{poolForm.size.$error.server}}</p>
                    </div>
                    <div class="form-group" ng-class="{ 'has-error': poolForm.pg_num.$invalid && !poolForm.pg_num.$pristine}">
                        <label class="text-muted" for="pg_num">PLACEMENT GROUPS (PG_NUM)</label>
                        <input id="pg_num" type="number" name="pg_num"
                        required class="form-control" ng-model='pool.pg_num' placeholder="Placement Groups"></input>
                        <p ng-show='poolForm.pg_num.$error.number' class='help-block'>Invalid Number</p>
                        <p ng-show='poolForm.pg_num.$error.server' class='help-block'>{{poolForm.pg_num.$error.server}}</p>
                    </div>
                    <div class="form-group" ng-class="{ 'has-error': poolForm.crush_ruleset.$invalid && !poolForm.crush_ruleset.$pristine}">
                        <label class="text-muted" for="crush_ruleset">CRUSH RULESET</label>
                        <select id="crush_ruleset" class="form-control" name="crush_ruleset"
                        required ng-model='pool.crush_ruleset'>
                            <option ng-repeat='crush in crushrulesets' value='{{crush.id}}'>{{crush.id}}: {{crush.rules[crush.active_sub_rule].name}}</option>
                        </select>
                        <p ng-show='poolForm.crush_ruleset.$error.server' class='help-block'>{{poolForm.crush_ruleset.$error.server}}</p>
                    </div>
                    <!-- {{ crushrulesets | json }} -->
                </form>
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div style="height: 10px"></div>
                <div>
                    <button type="button" class="btn btn-md btn-danger" ng-click='cancel()' data-placement="center"><i class="fa fa-fw fa-lg fa-arrow-left" bs-tooltip="ttCancel"></i>

                    </button>
                    <button type="button" class="btn btn-md btn-warning" ng-click='reset()' data-placement="center"><i class="fa fa-fw fa-lg fa-rotate-left" bs-tooltip="ttReset"></i>

                    </button>
                    <button type="button" ng-class="{ 'disabled': poolForm.$invalid }" class="btn btn-md btn-primary"
                    ng-click='create()' data-placement="center" bs-tooltip="ttCreate"><i class="fa fa-fw fa-lg fa-plus-square"></i>

                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="footer"></div>
</div>
</div !-- card -->
